<template>
  <div id="driveridentity_box" ref="driveridentitybox">
    <div class="showcardphoto" v-show="showcardphoto">
      <div>
        <div class="showcardimg_box">
          <p v-if="identityPositiveUrl" @click="identityPositiveUpload">
            <img :src="identityPositiveUrl" />
            <span>点击上传</span>
          </p>
          <p v-else @click="identityPositiveUpload">
            <img src="@/assets/imgs/idz.png" />
            <span>点击上传</span>
          </p>
          <p v-if="identityReverseUrl" @click="identityReverseUpload">
            <img :src="identityReverseUrl" />
            <span>点击上传</span>
          </p>
          <p v-else @click="identityReverseUpload">
            <img src="@/assets/imgs/idf.png" />
            <span>点击上传</span>
          </p>
        </div>
        <div class="showcardtext">
          <h6>身份证正反面</h6>
          <p>请按照示例图提交照片信息 确保对齐、文字清晰、无反光、无遮挡</p>
        </div>
        <p class="cardBtn">
          <span class="cardcannel" @click="cardcannelBtn">取消</span>
          <span class="cardupload" @click="identityUploadBtn">上传</span>
        </p>
      </div>
    </div>
    <div class="showcardphoto" v-show="showdriverlicensephoto">
      <div>
        <div class="showcardimg_box">
          <p v-if="cardPositiveUrl" @click="cardPositiveUpload">
            <img :src="cardPositiveUrl" />
            <span>点击上传</span>
          </p>
          <p v-else @click="cardPositiveUpload">
            <img src="@/assets/imgs/sfxx_jsz_zheng@2x.png" />
            <span>点击上传</span>
          </p>
          <p v-if="cardReverseUrl" @click="cardReverseUpload">
            <img :src="cardReverseUrl" />
            <span>点击上传</span>
          </p>
          <p v-else @click="cardReverseUpload">
            <img src="@/assets/imgs/sfxx_jsz_bei@2x.png" />
            <span>点击上传</span>
          </p>
        </div>
        <div class="showcardtext">
          <h6>驾驶证正反面</h6>
          <p>请按照示例图提交照片信息 确保对齐、文字清晰、无反光、无遮挡</p>
        </div>
        <p class="cardBtn">
          <span class="cardcannel" @click="cardcannelBtn">取消</span>
          <span class="cardupload" @click="cardUploadBtn">上传</span>
        </p>
      </div>
    </div>
    <div class="driver_top">
      <div class="driver_hx"></div>
      <div class="driver_one">
        <ul>
          <li class="ative">1</li>
          <li>2</li>
          <li>3</li>
          <li class="four">4</li>
        </ul>
      </div>
      <div class="driver_two">
        <ul>
          <li>
            <p class="text_ative">身份信息</p>
          </li>
          <li>
            <p>公司信息</p>
          </li>
          <li>
            <p>车辆信息</p>
          </li>
          <li>
            <p>从业信息</p>
          </li>
        </ul>
      </div>
    </div>
    <div class="driver_identity_box">
      <div class="driver_identity">
        <p class="driver_hd">头像信息</p>
        <div @click="personalPhotoUpload">
          <md-field>
            <md-field-item name title="个人头像" align="right" arrow="arrow-right">
              <img :src="photoUrl" class="personalpoto" v-if="photoUrl" />
              <img src="@/assets/imgs/dt_cktx_big.png" class="personalpoto" v-else />
            </md-field-item>
          </md-field>
        </div>
        <p class="driver_hd">个人信息</p>
        <md-field>
          <md-input-item title="姓氏" v-model="surname" placeholder="请输入姓氏" align="right"></md-input-item>
          <md-input-item title="名字" v-model="username" placeholder="请输入名字" align="right"></md-input-item>
          <md-input-item title="身份证号" placeholder="请输入身份证号" @blur="codeBlur" align="right" v-model="userId" maxlength="21"></md-input-item>
          <div @click="cardphotoBtn">
            <md-field-item name title="身份证照片" align="right" arrow="arrow-right" :value="cardphoto"></md-field-item>
          </div>
          <div @click="driverlicensephotoBtn">
            <md-field-item name title="驾驶证照片" align="right" arrow="arrow-right" :value="driverlicensephoto"></md-field-item>
          </div>
          <div @click="DatePickerShow">
            <md-field-item name title="初次领取驾照日期" align="right" arrow="arrow-right" :value="firstDate"></md-field-item>
          </div>
        </md-field>
        <p class="driver_hd">紧急联系人</p>
        <md-field>
          <md-input-item ref="联系人姓名" title="联系人姓名" placeholder="请输入联系人姓名" align="right" v-model="urgentName"></md-input-item>
          <md-input-item ref="联系人手机号" title="联系人手机号" placeholder="请输入联系人手机号" align="right" type="phone" v-model="urgentPhone"></md-input-item>
        </md-field>
      </div>
      <div class="netxBtn_box">
        <p class="netxBtn" @click="driverIdentityBtn">下一步</p>
      </div>
    </div>
    <md-date-picker
      ref="datePicker"
      v-model="isDatePickerShow"
      title="初次领取驾照日期"
      :minDate="minDate"
      :maxDate="maxDate"
      :default-date="currentDate"
      :unit-text="unitText"
      @confirm="onDatePickerConfirm"
    ></md-date-picker>
  </div>
</template>
<script>
/* eslint-disable */
import { Icon, Field, FieldItem, InputItem, Toast, ImageReader, Dialog, DatePicker } from 'mand-mobile';
import Loading from '@/components/loading';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import http from '@/common/http';
import { Base64 } from 'js-base64';
import Utils from '@/common/pakjUtils';
import axios from 'axios';
var moment = require('moment');
moment.locale('zh-cn');
// var Vconsole = require('vconsole');
// var cons = new Vconsole();
export default {
  components: {
    [Icon.name]: Icon,
    [Field.name]: Field,
    [Toast.name]: Toast,
    [ImageReader.name]: ImageReader,
    [InputItem.name]: InputItem,
    [FieldItem.name]: FieldItem,
    [DatePicker.name]: DatePicker
  },
  data() {
    return {
      Height: {
        height: ''
      },
      title: '完善身份信息',
      photoUrl: '',
      driverId: '',
      isDatePickerShow: false,
      minDate: new Date('1970/9/9'),
      maxDate: new Date(),
      currentDate: new Date(),
      unitText: ['', '', '', '', ''],
      firstDate: '请选择',
      surname: '', // 姓氏
      username: '', // 名字
      userId: '', // 身份证
      cardphoto: '待上传',
      showcardphoto: false,
      showdriverlicensephoto: false,
      driverlicensephoto: '待上传',
      urgentName: '', // 紧急联系人
      urgentPhone: '', // 紧急联系人电话
      identityPositiveUrl: '', // 身份证正面url地址
      identityReverseUrl: '', // 身份证反面url地址
      cardPositiveUrl: '', // 驾驶证正面url地址
      cardReverseUrl: '', // 驾驶证反面url地址
      driverUploadType: '' // 上传图片类型
    };
  },
  mounted() {
    this.getheight();
    // 身份信息回显
    if (this.$route.query.driverid) {
      var params = {
        driverId: this.$route.query.driverid
      };
      Loading.show();
      http.post('/pakj/txDriver/getDriverBasicInfo', params).then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          console.log(res.data);
          if (res.data.data.driverImage) {
            this.photoUrl = res.data.data.driverImage; // 司机头像
          }
          if (!res.data.data.driverIdPhoto) {
            this.cardphoto = '待上传';
          } else {
            this.identityPositiveUrl = res.data.data.driverIdPhoto; // 身份证正面
            this.cardphoto = '重新上传';
          }
          if (res.data.data.driverIdReversePhoto) {
            this.identityReverseUrl = res.data.data.driverIdReversePhoto; // 身份证反面
          }
          if (!res.data.data.driverLicensePhoto) {
            this.driverlicensephoto = '待上传';
          } else {
            this.driverlicensephoto = '重新上传';
            this.cardPositiveUrl = res.data.data.driverLicensePhoto; // 驾驶证正面
          }
          if (res.data.data.driverLicenseReversePhoto) {
            this.cardReverseUrl = res.data.data.driverLicenseReversePhoto; // 驾驶证反面
          }
          if (!res.data.data.driverLicenseFirstTime) {
            this.firstDate = '请选择';
          } else {
            this.firstDate = moment(res.data.data.driverLicenseFirstTime, 'x').format('YYYY-MM-DD'); // 初次领取时间
          }
          if (res.data.data.driverIdNumber) {
            this.userId = decryptByDESModeEBC(res.data.data.driverIdNumber)
              .replace(/\s+/g, '')
              .replace(/(\S{6})(\S{4})(\S{4})(\S{4})/g, '$1 $2 $3 $4'); // 身份证号
          }
          this.urgentName = res.data.data.driverContactName; // 紧急联系人
          this.urgentPhone = decryptByDESModeEBC(res.data.data.driverContactPhone); // 紧急联系人电话
          this.username = res.data.data.driverName; // 司机名
          this.surname = res.data.data.surname; // 司机姓氏
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    }
  },
  methods: {
    getheight() {
      this.Height.height = this.$refs.driveridentitybox.clientHeight + 'px';
    },
    cardphotoBtn() {
      // 身份证
      this.showcardphoto = true;
    },
    driverlicensephotoBtn() {
      // 驾驶证
      this.showdriverlicensephoto = true;
    },
    cardcannelBtn() {
      this.showcardphoto = false;
      this.showdriverlicensephoto = false;
    },
    codeBlur() {
      this.userId = this.userId.replace(/\s+/g, '').replace(/(\S{6})(\S{4})(\S{4})(\S{4})/g, '$1 $2 $3 $4');
    },
    DatePickerShow() {
      this.isDatePickerShow = true;
    },
    onDatePickerConfirm() {
      this.firstDate = this.$refs.datePicker.getFormatDate('yyyy-MM-dd');
    },
    // 上传头像
    personalPhotoUpload() {
      this.driverUploadType = '1';
      this.pullUpAppUpload(this.driverUploadType);
    },
    // 身份证正面
    identityPositiveUpload() {
      this.driverUploadType = '2';
      this.pullUpAppUpload(this.driverUploadType);
    },
    // 身份证反面
    identityReverseUpload() {
      this.driverUploadType = '3';
      this.pullUpAppUpload(this.driverUploadType);
    },
    // 驾驶证正面
    cardPositiveUpload() {
      this.driverUploadType = '4';
      this.pullUpAppUpload(this.driverUploadType);
    },
    // 驾驶证反面
    cardReverseUpload() {
      this.driverUploadType = '5';
      this.pullUpAppUpload(this.driverUploadType);
    },
    // 拉起app上传
    pullUpAppUpload(number) {
      var type = {
        type: number
      };
      var os = Utils.getOSName();
      if ((os === 'Linux' || os === 'Android') && handler) {
        handler.driverUpload(JSON.stringify(type));
      } else if ((os === 'iOS' || os === 'MacOSX') && window.webkit) {
        window.webkit.messageHandlers.driverUpload.postMessage(JSON.stringify(type));
      }
      window.uploadcallback = this.uploadcallback;
      // Loading.show();
    },
    uploadcallback(msg) {
      var data = JSON.parse(Base64.decode(msg));
      // Loading.hide();
      switch (String(data.type)) {
        // 1 司机头像
        case '1':
          this.photoUrl = data.url;
          break;
        // 2 身份证正面
        case '2':
          this.identityPositiveUrl = data.url;
          break;
        // 3 身份证反面
        case '3':
          this.identityReverseUrl = data.url;
          break;
        // 4 驾驶证正面
        case '4':
          this.cardPositiveUrl = data.url;
          break;
        // 5 驾驶证反面
        case '5':
          this.cardReverseUrl = data.url;
          break;
        default:
          break;
      }
      console.log(data);
    },
    // 身份证上传到后台识别
    identityUploadBtn() {
      if (!this.identityPositiveUrl) {
        Toast({
          content: '请上传身份证正面照片',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!this.identityReverseUrl) {
        Toast({
          content: '请上传身份证反面照片',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      // 只对正面进行识别
      this.cardphoto = '重新上传';
      var url = '';
      axios.get(this.identityPositiveUrl, { responseType: 'arraybuffer' }).then(res => {
        var base64 = new Buffer(res.data, 'binary').toString('base64');
        url = 'data:image/jpeg;base64,' + base64;
        this.photoUpload(url, '1');
      });
    },
    // 驾驶证上传到后台识别
    cardUploadBtn() {
      if (!this.cardPositiveUrl) {
        Toast({
          content: '请上传驾驶证正面照片',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!this.cardReverseUrl) {
        Toast({
          content: '请上传驾驶证反面照片',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      // 只对正面进行识别
      this.driverlicensephoto = '重新上传';
      this.photoUpload(this.cardPositiveUrl, '2');
    },
    // 图片上传到后台进行识别
    photoUpload(url, type) {
      if (type === '1') {
        var params = {
          photoType: 1,
          imageBase64: url,
          side: 1
        };
      } else {
        var params = {
          photoType: type,
          url: url + '?x-oss-process=style/beijingregulatory'
        };
      }
      console.log(params);
      Loading.show();
      http.post('/pakj/common/photoAnalysis', params).then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          this.showcardphoto = false;
          this.showdriverlicensephoto = false;
          console.log(res.data.data);
          let imgMsg = JSON.parse(res.data.data);
          console.log(imgMsg);
          if (imgMsg.result.realname) {
            this.surname = imgMsg.result.realname.substring(0, 1); // 姓氏
            this.username = imgMsg.result.realname.substring(1); // 名字
          }
          if (imgMsg.result.idcard) {
            var id = imgMsg.result.idcard;
            this.userId = id.replace(/\s+/g, '').replace(/(\S{6})(\S{4})(\S{4})(\S{4})/g, '$1 $2 $3 $4');
          }
          if (imgMsg.result.expiryInitiaLicenseDate) {
            this.firstDate = moment(imgMsg.result.expiryInitiaLicenseDate, 'YYYYMMDD').format('YYYY-MM-DD');
          }
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    driverIdentityBtn() {
      var regphone = /^1[23456789]\d{9}$/;
      var reg = /^[1-9][0-9]{5}([1][9][0-9]{2}|[2][0][0|1][0-9])([0][1-9]|[1][0|1|2])([0][1-9]|[1|2][0-9]|[3][0|1])[0-9]{3}([0-9]|[X]|[x])$/;
      if (!this.photoUrl) {
        Toast({
          content: '请上传司机头像',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!this.surname) {
        Toast({
          content: '请输入姓氏',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!this.username) {
        Toast({
          content: '请输入名字',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!this.userId) {
        Toast({
          content: '请输入身份证',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      var code = this.userId.replace(/\s+/g, '');
      if (!reg.test(code)) {
        Toast({
          content: '请输入正确的二代18位身份证号',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!this.identityPositiveUrl) {
        Toast({
          content: '请上传身份证正面照片',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!this.identityReverseUrl) {
        Toast({
          content: '请上传身份证反面照片',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!this.cardPositiveUrl) {
        Toast({
          content: '请上传驾驶证正面照片',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!this.cardReverseUrl) {
        Toast({
          content: '请上传驾驶证反面照片',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (this.firstDate === '请选择') {
        Toast({
          content: '请选择初次领取驾驶证日期',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!this.urgentName) {
        Toast({
          content: '请输入紧急联系人',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!this.urgentPhone) {
        Toast({
          content: '请输入手机号',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!regphone.test(this.urgentPhone)) {
        Toast({
          content: '手机号格式错误',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      let params = {
        driverId: this.$route.query.driverid,
        driverPhone: this.$route.query.driverphone,
        driverImage: this.photoUrl, // 司机头像
        driverIdPhoto: this.identityPositiveUrl, // 身份证正面
        driverIdReversePhoto: this.identityReverseUrl, // 身份证反面
        driverIdNumber: encryptByDESModeEBC(code), // 身份证号
        driverLicensePhoto: this.cardPositiveUrl, // 驾驶证正面
        driverLicenseReversePhoto: this.cardReverseUrl, // 驾驶证反面
        driverLicenseFirstTime: moment(this.firstDate).valueOf(), // 初次领证时间
        driverContactName: this.urgentName, // 联系人姓名
        driverContactPhone: encryptByDESModeEBC(this.urgentPhone), // 联系人手机号
        driverName: this.username, // 请输入名字
        surname: this.surname // 请输入姓氏
      };
      Loading.show();
      http.post('/pakj/txDriver/saveDriverBasicInfo', params).then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          this.driverId = res.data.data.driverId;
          this.$router.push({
            name: 'driverCompany',
            query: {
              driverId: this.$route.query.driverid || this.driverId,
              driverphone: this.$route.query.driverphone
            }
          });
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    }
  }
};
</script>
<style lang="stylus">
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

h6 {
  display: block;
  font-size: 22px;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: 400;
}

.showcardphoto {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.showcardimg_box {
  width: 600px;
  margin: auto;
}

.showcardimg_box p {
  margin-top: 20px;
  position: relative;
}

.showcardimg_box p img {
  width: 600px;
  height: 340px;
}

.showcardimg_box p span {
  width: 200px;
  height: 88px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 10px;
  display: inline-block;
  line-height: 88px;
  text-align: center;
  font-size: 30px;
  color: #fff;
  position: absolute;
  top: 128px;
  left: 200px;
}

.showcardtext {
  margin-top: 20px;
}

.showcardtext h6 {
  text-align: center;
  font-size: 32px;
  color: #FF6917;
  font-weight: 400;
}

.showcardtext p {
  color: #fff;
  font-size: 28px;
  text-align: center;
  width: 450px;
  margin: auto;
  padding-top: 20px;
}

.cardBtn {
  margin: 20px 40px;
}

.cardcannel {
  width: 200px;
  display: inline-block;
  height: 98px;
  line-height: 98px;
  text-align: center;
  font-size: 36px;
  color: #FF6917;
  background-color: #fff;
  border-radius: 10px;
}

.cardupload {
  width: 440px;
  display: inline-block;
  height: 98px;
  line-height: 98px;
  text-align: center;
  font-size: 36px;
  color: #fff;
  background-color: #FF6917;
  margin-left: 30px;
  border-radius: 10px;
}

#driveridentity_box {
  .md-input-item .md-input-item-extra.fixed, .md-input-item .md-input-item-title.fixed {
    width: auto;
  }

  .driver_top {
    height: 180px;
    background: rgba(42, 42, 51, 1);
    padding: 0px 30px;
    font-size: 26px;
  }

  .driver_hx {
    height: 12px;
    width: 25%;
    background-color: #FF6917;
    position: absolute;
    top: 55px;
    left: 80px;
  }

  .driver_one {
    padding-top: 55px;
    margin: 0px 30px;
  }

  .driver_one ul {
    display: flex;
    justify-content: space-between;
    background-color: #E0E0E0;
    height: 12px;
  }

  .driver_one ul li {
    width: 40px;
    height: 40px;
    background-color: #B8B8B8;
    line-height: 40px;
    border-radius: 50%;
    text-align: center;
    position: relative;
    top: -15px;
    right: 2px;
  }

  .driver_one ul li.four {
    left: 4px;
  }

  .driver_one ul li.ative {
    background-color: #FF6917;
    color: #fff;
    border-radius: 50%;
  }

  .driver_two {
    margin-top: 30px;
  }

  .driver_two ul {
    display: flex;
    justify-content: space-between;
    color: #fff;
  }

  .driver_two ul li p.text_ative {
    color: #FF6917;
  }

  .driver_hd {
    background-color: #EFEFEF;
    height: 88px;
    line-height: 88px;
    font-size: 26px;
    color: #999;
    padding: 0px 30px;
  }

  .personalpoto {
    width: 56px;
    height: 56px;
    border-radius: 50%;
  }

  .netxBtn_box {
    background-color: #EFEFEF;
    padding: 20px;
  }

  .netxBtn {
    height: 98px;
    background-color: #FF6917;
    line-height: 98px;
    text-align: center;
    font-size: 36px;
    color: #fff;
    border-radius: 10px;
  }

  .driver_identity_box {
    height: calc(100vh -180px);
    overflow: hidden;
    overflow-y: auto;
  }
}
</style>
